$f: 19.2;
body{
  background: #EDEDED;

}
.home {
  position: relative;
  width: 100%;

  img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  .common_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .fixed_alert{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: .6s;
    &.on{
      opacity: 1;
      pointer-events: auto;
      .content{
        transform: translateX(0);
      }
    }
    .mask_{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0.5;
      background: #000;
    }
    .content{
      width: 1640px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      padding: 65px 139px 0 0;
      background: #EDEDED;
      position: relative;
      z-index: 4;
      transform: translateX(100%);
      transition: .6s;
     .l{
       .move{
         margin: 0 0 0 65px;
         .back{
           width: 42px;
           height: 42px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           margin: 0 0 38px;
           background: #D9D9D9;
           cursor: pointer;
           transition: .6s ease;
           &:hover{
             background: #2932E1;
             svg{
               path{
                 fill: #fff;
               }
             }
           }
           svg{
             width: 25px;
             height: 25px;
             path{
               transition: .6s ease;

             }
           }
         }
         .title{
           color: #000;
           font-size: 64px;
           font-style: normal;
           font-weight: 600;
           line-height: 60px; /* 93.75% */
           text-transform: capitalize;
         }
       }
       .position{
         width: 664px;
         position: absolute;
         left: 0;
         bottom: -51px;
       }
     }
      .r{
        width: 740px;
        margin: 73px 0 0 0;
        .matter{
          &:not(:last-child) {
            margin: 0 0 51px;
          }
          .p1{
            color: #000;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            text-transform: capitalize;
            margin: 0 0 39px;
          }
          .flex{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 50px 0;
            .list{
              width: 340px;
              position: relative;
              &.all{
                width: 100%;
              }
              &.on{
                p{
                  top: -20px;
                  font-size: 12px;
                }
                input{
                  border-bottom: 1px solid #000;
                }
              }
              p{
                position: absolute;
                left: 0;
                top: 0;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                color: rgba(0,0,0,.2);
                transition: .3s ease;
                pointer-events: none;
              }
              input{
                width: 100%;
                background: transparent;
                padding: 0 0 11px;
                border: none;
                border-bottom: 1px solid rgba(0,0,0,.2);
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                transition: .6s ease;
                &::placeholder{
                  color: rgba(0,0,0,.2);
                }
              }
            }
            .end{
              display: flex;
              width: 100%;
              justify-content: flex-end;
              button{
                width: 173px;
                height: 47px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFF;
                border-radius: 52px;
                background: #2932E1;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                border: none;
                cursor: pointer;
                transition: .6s ease;
                &:hover{
                  background: #000;
                }
              }
            }
          }
        }
      }
    }
  }

  .banner{
    height: 707/$f+vw;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    .position{
      position: absolute;
      left: 170/$f+vw;
      bottom: 130/$f+vw;
      color: #FFF;
      font-size: 70/$f+vw;
      font-style: normal;
      font-weight: 600;
      text-transform: capitalize;
    }
  }

  .section1{
    padding: 89/$f+vw 170/$f+vw 59/$f+vw 170/$f+vw;
    position: relative;
    z-index: 1;
    .title{
      text-align: center;
      color: #000;
      font-size: 64/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: 96/$f+vw; /* 150% */
      text-transform: capitalize;
      margin: 0 0 56/$f+vw;
    }
    .content{
      .item{
        width: 1118/$f+vw;
        height: 250/$f+vw;
        border-radius: 40/$f+vw;
        background: #FFFEFE;
        padding: 34/$f+vw 82/$f+vw 43/$f+vw 70/$f+vw;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        h1{
          color: #000;
          font-size: 36/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          text-transform: capitalize;
          margin: 0 0 5/$f+vw;
        }
        p{
          color: #000;
          text-align: justify;
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-transform: capitalize;
        }
        &:not(:last-child) {
          margin: 0 0 49/$f+vw;
        }
        &:nth-child(2n) {
          text-align: right;
          left: 462/$f+vw;
          p{
            text-align: right;
          }
        }
      }
    }
    .position{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
      padding: 0 170/$f+vw 0 0;
      display: flex;
      justify-content: flex-end;
      img{
        width: 664/$f+vw;
        position: relative;
        top: 178/$f+vw;
        z-index: 2;
        object-fit: contain;
      }
    }
  }

  .section2{
    padding: 100/$f+vw 170/$f+vw 127/$f+vw 170/$f+vw;
    position: relative;
    z-index: 2;
    .title{
      color: #000;
      text-align: center;
      font-size: 64/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: 96/$f+vw; /* 150% */
      text-transform: capitalize;
      margin: 0 0 49/$f+vw;
    }
    .content{
      display: flex;
      flex-wrap: wrap;
      gap: 36/$f+vw 40/$f+vw;
      .item{
        width: 500/$f+vw;
        height: 420/$f+vw;
        border-radius: 40/$f+vw;
        background: #FFFEFE;
        padding: 40/$f+vw 0 0 0;
        &:hover{
          .icon{
            margin: 0 auto;
          }
          .pick{
            opacity: 1;
            pointer-events: auto;
          }
        }
        .icon{
          width: 80/$f+vw;
          height: 83/$f+vw;
          margin: 60/$f+vw auto 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition:.6s;
          svg{
            max-width: 100%;
            max-height: 100%;
          }
        }
        .headline{
          color: #000;
          text-align: center;
          font-size: 36/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: 54/$f+vw; /* 150% */
          text-transform: capitalize;
          margin: 0 0 20/$f+vw;
        }
        .pick{
          width: 403/$f+vw;
          margin: auto;
          color: #000;
          text-align: center;
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-transform: capitalize;
          opacity: 0;
          pointer-events: none;
          transition:.6s;
        }
      }
    }
  }

  .section3{
    position: relative;
    z-index: 2;
    margin: 100/$f+vw 170/$f+vw 93/$f+vw 170/$f+vw;
    height: 900/$f+vw;
    display: flex;
    align-items: center;
    justify-content: center;
    .title{
      color: #FFF;
      font-size: 64/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      text-align: center;
    }
    .more{
      width: 173/$f+vw;
      height: 47/$f+vw;
      border-radius: 52/$f+vw;
      background: #2932E1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      font-size: 18/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      cursor: pointer;
      margin: auto;
    }
  }

  .section4{
    border-radius: 60/$f+vw;
    margin: 100/$f+vw 170/$f+vw 161/$f+vw 170/$f+vw;
    overflow: hidden;
    display: flex;
    background: #D5D5D5;
    position: relative;
    z-index: 5;
    .img{
      width: 711/$f+vw;
      height: 548/$f+vw;
      overflow: hidden;
      &:hover{
        img{
          transform: scale(1.05);
        }
      }
      img{
        width: 100%;
        height: 100%;
        transition: .6s ease;
      }
    }
    .color{
      width: 869/$f+vw;
      height: 100%;
      padding: 159/$f+vw 0 0 120/$f+vw;
      h1{
        color: #000;
        font-size: 64/$f+vw;
        font-style: normal;
        font-weight: 600;
        text-transform: capitalize;
        margin: 0 0 77/$f+vw;
      }
      .pick{
        p{
          color: #000;
          text-align: justify;
          font-size: 26/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-transform: capitalize;
          &:not(:last-child) {
            margin: 0 0 20/$f+vw;
          }
        }
      }
    }
  }

  .foot{
    position: relative;
    z-index: 5;
  }

  @media screen and (max-width: 1920px) {
    .fixed_alert{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 999;
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: .6s;
      &.on{
        opacity: 1;
        pointer-events: auto;
        .content{
          transform: translateX(0);
        }
      }
      .mask_{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.5;
        background: #000;
      }
      .content{
        width: 1640/$f+vw;
        height: 100%;
        display: flex;
        justify-content: space-between;
        padding: 65/$f+vw 139/$f+vw 0 0;
        background: #EDEDED;
        position: relative;
        z-index: 4;
        transform: translateX(100%);
        transition: .6s;
        .l{
          .move{
            margin: 0 0 0 65/$f+vw;
            .back{
              width: 42/$f+vw;
              height: 42/$f+vw;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              margin: 0 0 38/$f+vw;
              background: #D9D9D9;
              cursor: pointer;
              transition: .6s ease;
              &:hover{
                background: #2932E1;
                svg{
                  path{
                    fill: #fff;
                  }
                }
              }
              svg{
                width: 25/$f+vw;
                height: 25/$f+vw;
                path{
                  transition: .6s ease;

                }
              }
            }
            .title{
              color: #000;
              font-size: 64/$f+vw;
              font-style: normal;
              font-weight: 600;
              line-height: 60/$f+vw; /* 93.75% */
              text-transform: capitalize;
            }
          }
          .position{
            width: 664/$f+vw;
            position: absolute;
            left: 0;
            bottom: -51/$f+vw;
          }
        }
        .r{
          width: 740/$f+vw;
          margin: 73/$f+vw 0 0;
          .matter{
            &:not(:last-child) {
              margin: 0 0 51/$f+vw;
            }
            .p1{
              color: #000;
              font-size: 18/$f+vw;
              font-style: normal;
              font-weight: 600;
              line-height: normal;
              text-transform: capitalize;
              margin: 0 0 39/$f+vw;
            }
            .flex{
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              gap: 50/$f+vw 0;
              .list{
                width: 340/$f+vw;
                position: relative;
                &.all{
                  width: 100%;
                }
                &.on{
                  p{
                    top: -20/$f+vw;
                    font-size: 12/$f+vw;
                  }
                  input{
                    border-bottom: 1px solid #000;
                  }
                }
                p{
                  position: absolute;
                  left: 0;
                  top: 0;
                  font-size: 18/$f+vw;
                  font-style: normal;
                  font-weight: 600;
                  line-height: normal;
                  text-transform: capitalize;
                  color: rgba(0,0,0,.2);
                  transition: .3s ease;
                  pointer-events: none;
                }
                input{
                  width: 100%;
                  background: transparent;
                  padding: 0 0 11/$f+vw;
                  border: none;
                  border-bottom: 1px solid rgba(0,0,0,.2);
                  font-size: 18/$f+vw;
                  font-style: normal;
                  font-weight: 600;
                  line-height: normal;
                  text-transform: capitalize;
                  transition: .6s ease;
                  &::placeholder{
                    color: rgba(0,0,0,.2);
                  }
                }
              }
              .end{
                display: flex;
                width: 100%;
                justify-content: flex-end;
                button{
                  width: 173/$f+vw;
                  height: 47/$f+vw;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #FFF;
                  border-radius: 52/$f+vw;
                  background: #2932E1;
                  font-size: 18/$f+vw;
                  font-style: normal;
                  font-weight: 600;
                  line-height: normal;
                  text-transform: capitalize;
                  border: none;
                  cursor: pointer;
                  transition: .6s ease;

                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .fixed_alert{
      .content{
        width: 100%;
        padding: 100px 5%;
        flex-direction: column;
        justify-content: unset;
        .l{
          .move{
            margin: 0;
            .back{
              width: 35px;
              height: 35px;
              margin: 0 0 20px;
              svg{
                width: 20px;
                height: 20px;
              }
            }
            .title{
              font-size: 24px;
              line-height: 1.5;
            }
          }
        }
        .r{
          width: 100%;
          position: relative;
          z-index: 5;
          .jump{
            height: 360px;
            overflow-y: scroll;
            .p1{
              font-size: 16px;
            }
            .flex{
              flex-direction: column;
              .list{
                width: 100%;
                &.on{
                  p{
                    display: none;
                  }
                }
                p{
                  font-size: 13px!important;
                  top: 0!important;
                }
                input{
                  font-size: 13px;
                  padding: 0 0 10px;
                }
              }
              .end{
                button{
                  width: 130px;
                  height: 38px;
                  font-size: 14px;
                  border-radius: 50px;
                }
              }
            }
          }
        }
      }
    }
    .banner{
      margin: 60px 0 0 0;
      .position{
        left: 5%;
        bottom: 40px;
        font-size: 24px;
      }
    }
    .section1{
      padding: 35px 5%;
      .title{
        font-size: 24px;
        line-height: 1.4;
        margin: 0 0 25px;
      }
      .content{
        .item{
          width: 100%;
          height: auto;
          padding: 30px 5%;
          left: 0!important;
          &:not(:last-child) {
            margin: 0 0 20px;
          }
          div{
            h1{
              font-size: 20px;
              margin: 0 0 10px;
              text-align: left!important;
            }
            p{
              font-size: 14px;
              line-height: 1.7;
              text-align: left!important;
            }
          }
        }
      }
    }
    .section2{
      padding: 50px 5%;
      .title{
        font-size: 24px;
        line-height: 1.6;
        margin: 0 0 20px;
      }
      .content{
        .item{
          width: 100%;
          height: auto;
          padding: 25px 0;
          .pick{
            width: 90%;
            font-size: 13px;
            line-height: 1.7;
            margin: 20px auto 0;
            opacity: 1;
            pointer-events: auto;
          }
          .icon{
            margin: 0 auto 10px!important;
            width: 40px;
            height: 40px;
          }
          .headline{
            font-size: 14px;
            line-height: 20px;
            margin: 0;
          }
        }
      }
    }
    .section3{
      margin: 0 5% 25px 5%;
      height: 250px;
      border-radius: 15px;
      overflow: hidden;
      .title{
        font-size: 22px;
        margin: 0 0 12px;
      }
      .more{
        width: 130px;
        height: 38px;
        font-size: 14px;
        border-radius: 50px;
      }
    }
    .section4{
      border-radius: 15px;
      margin: 25px 5%;
      flex-direction: column;
      .img{
        width: 100%;
        height: auto;
        img{
          transform: scale(1.1);
        }
      }

      .color{
        width: 100%;
        padding: 25px 5%;
        h1{
          font-size: 24px;
          margin: 0 0 10px;
        }
        .pick{
          p{
            font-size: 14px;
            &:not(:last-child) {
              margin: 0 0 5px;
            }
          }
        }
      }

    }
  }
}